<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
    >
      <el-form-item label="工作站" prop="leadingStaffId">
        <el-select
          v-model="form.gzzId"
          placeholder="请选择工作站"
          clearable
        >
          <el-option
            v-for="item in gongzzList"
            :key="item.id"
            :label="item.zname"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="检测工序" prop="gongxuid">
        <el-select
          v-model="form.gxId"
          placeholder="请选择检测工序"
          clearable
        >
          <el-option
            v-for="item in gongxuList"
            :key="item.id"
            :label="item.gxname"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
    
      <el-form-item label="产品科号" prop="transTitle">
        <el-input
            v-model="form.pno"
            placeholder="请输入产品科号（分类），如01-107787"
            clearable
            style="width: 120px"
        />
      </el-form-item>
      <el-form-item label="产品编码" prop="transTitle">
        <el-input
            v-model="form.pnumber"
            placeholder="请输入或扫码产品编码"
            clearable
            style="width: 120px"
        />
      </el-form-item>
      <el-form-item label="检测值" prop="insValue">
        <el-input
            v-model="form.insvalue"
            placeholder="请输入数字"
            clearable
            style="width: 120px"
        />
      </el-form-item>

      <el-form-item>
        <!-- <el-button
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >重置</el-button
        > -->
        <el-button icon="el-icon-refresh" type="primary" @click="addInspect"
          >保存</el-button
        >
      </el-form-item>
    </el-form>

    <el-row v-if="isAdmin" :gutter="10" class="mb8">
      <!-- <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          @click="handleDelete(ids)"
          >删除
        </el-button>
      </el-col> -->
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          >导出
        </el-button>
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <el-table
      v-loading="loading"
      :data="tableList"
      @selection-change="handleSelectionChange"
      border
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column align="center" label="产品编码" prop="remark" width="100">
        <template slot-scope="{ row }">
          {{ row.inspectRecord.pnumber }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="产品名称" prop="remark" width="100">
        <template slot-scope="{ row }">
          {{row.product.pname}}
        </template>
      </el-table-column>
      <el-table-column align="center" label="产品科号" prop="remark" width="100">
        <template slot-scope="{ row }">
          {{row.product.pno}}
          </template>
      </el-table-column>

      
      <el-table-column align="center" label="产品规格型号" prop="remark" width="100">
        <template slot-scope="{ row }">
          {{row.product.ptype}}
        </template>
      </el-table-column>
      <el-table-column align="center" label="检测值" prop="remark" width="100">
        <template slot-scope="{ row }">
          {{row.inspectRecord.insvalue}}
        </template>
      </el-table-column>
      <el-table-column align="center" label="产品单位" prop="remark" width="100">
        <template slot-scope="{ row }">
          {{row.inspectRecord.insunit}}
        </template>
      </el-table-column>
      
      <el-table-column align="center" label="检测站" prop="remark" width="100">
        <template slot-scope="{ row }">
          {{row.gongzz.zname}}
        </template>
      </el-table-column>
      <el-table-column align="center" label="检测人" prop="remark" width="100">
        <template slot-scope="{ row }">
          {{row.staff.name}}
        </template>
      </el-table-column>
      <el-table-column align="center" label="检测时间" prop="remark" width="100">
        <template slot-scope="{ row }">
          {{row.inspectRecord.instime}}
        </template>
      </el-table-column>
      <el-table-column align="center" label="是否通过" prop="remark" width="100">
        <template slot-scope="{ row }">
          <span v-if="row.inspectRecord.ispass === 1">通过</span>
          <span v-else :class="{ 'red-text': true }">不通过</span>
        </template>
      </el-table-column>
      <!-- <el-table-column
        align="center"
        label="修改时间"
        prop="uptime"
        width="100"
      /> -->
      <el-table-column align="center" label="备注" prop="remark" width="300">
        <template slot-scope="{ row }">
          {{row.inspectRecord.remark}}
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        label="操作"
        class-name="small-padding fixed-width"
        width="200"
        fixed="right"
      >
        <template slot-scope="scope">
          <!-- <el-button
            v-if="isAdmin"
            size="mini"
            type="text"
            @click="handleUpdate(scope.row)"
            >编辑
          </el-button> -->

          <el-button
            v-if="isAdmin"
            size="mini"
            type="text"
            @click="handleDelete(scope.row.inspectRecord.id)"
            >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.curPage"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改角色配置对话框 -->
    <!-- <el-dialog :title="title" :visible.sync="open" width="70%" append-to-body>
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="100px"
        inline
      >
        <el-form-item label="产品编码" prop="title">
          <el-input v-model="form.title" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="产品名称" prop="scrapeDate">
          <el-date-picker
            v-model="form.scrapeDate"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="发表日期" prop="publishDate">
          <el-date-picker
            v-model="form.publishDate"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="子标题" prop="transTitle">
          <el-input v-model="form.transTitle" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="关键字" prop="keyword">
          <el-input v-model="form.keyword" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="作者" prop="author">
          <el-input v-model="form.author" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="语言" prop="language">
          <el-input v-model="form.language" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="类型" prop="typeTag">
          <el-input v-model="form.typeTag" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="链接" prop="url">
          <el-input v-model="form.url" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="英文关键字" prop="abstractStr">
          <el-input v-model="form.abstractStr" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="简要关键字" prop="transAbstract">
          <el-input v-model="form.transAbstract" placeholder="请输入" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog> -->
    <!-- 文件预览弹窗 -->
    <!-- <el-dialog title="在线预览" :visible.sync="previewVisible" width="60%">
      <vue-office-docx :src="previewUrl" @rendered="rendered" />
    </el-dialog> -->
  </div>
</template>

<script>
import { changeRoleStatus, deptTreeSelect } from "@/api/system/role";
import { roleMenuTreeselect } from "@/api/system/menu";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { DomEditor } from "@wangeditor/editor";
import VueOfficeDocx from "@vue-office/docx";
import "@vue-office/docx/lib/index.css";
import TextOverflow from "@/views/qyxx/components/text-overflow.vue";
import {
  createQyxx,
  deleteQyxx,
  editQyxx,
  getQyxxList,
  getSourcePath,
  pageProduct,
  pageInspectRecord,//查询检测记录
  deletInspect,//删除检测记录
  listGongzz,
  addInspect  //新增检测记录
} from "@/api";

import {
  GongxuList
} from "@/api/gyjc/gongxu";
import { mapGetters } from "vuex";

export default {
  name: "dp",
  components: { TextOverflow, Editor, Toolbar, VueOfficeDocx },
  dicts: ["sys_normal_disable"],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 角色表格数据
      tableList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 是否显示弹出层（数据权限）
      openDataScope: false,
      deptExpand: true,
      deptNodeAll: false,
      // 日期范围
      dateRange: [],
      // 数据范围选项
      dataScopeOptions: [
        {
          value: "1",
          label: "全部数据权限",
        },
        {
          value: "2",
          label: "自定数据权限",
        },
        {
          value: "3",
          label: "本部门数据权限",
        },
        {
          value: "4",
          label: "本部门及以下数据权限",
        },
        {
          value: "5",
          label: "仅本人数据权限",
        },
      ],
      // 文件预览
      previewUrl: "",
      // 弹出层是否可见
      previewVisible: false,
      // 菜单列表
      menuOptions: [],
      // 部门列表
      deptOptions: [],
      // 查询参数
      queryParams: {
        curPage: 1,
        pageSize: 10,
        title: undefined,
        transTitle: undefined,
        status: undefined,
      },
      // 表单参数
      form: {},
      defaultProps: {
        children: "children",
        label: "label",
      },
      // 表单校验
      rules: {
        title: [{ required: true, message: "标题不能为空", trigger: "blur" }],
        scrapeDate: [
          { required: true, message: "爬取日期不能为空", trigger: "blur" },
        ],
        publishDate: [
          { required: true, message: "发表日期不能为空", trigger: "blur" },
        ],
        transTitle: [
          { required: true, message: "子标题不能为空", trigger: "blur" },
        ],
        keyword: [
          { required: true, message: "关键字不能为空", trigger: "blur" },
        ],
        author: [{ required: true, message: "作者不能为空", trigger: "blur" }],
        language: [
          { required: true, message: "语言不能为空", trigger: "blur" },
        ],
        typeTag: [{ required: true, message: "类型不能为空", trigger: "blur" }],
        url: [{ required: true, message: "链接不能为空", trigger: "blur" }],
        abstractStr: [
          { required: true, message: "英文关键字不能为空", trigger: "blur" },
        ],
        transAbstract: [
          { required: true, message: "简要关键字不能为空", trigger: "blur" },
        ],
        fwb: [{ required: true, message: "内容不能为空", trigger: "blur" }],
        enclosure: [
          { required: true, message: "权限字符不能为空", trigger: "blur" },
        ],
        listenFileTypeCode: [
          { required: true, message: "权限字符不能为空", trigger: "blur" },
        ],
      },
      editor: null,
      toolbarConfig: {
        excludeKeys: ["emotion", "insertLink", "group-image", "group-video"],
      },
      editorConfig: { placeholder: "请输入内容..." },
      mode: "default", // or 'simple'
      classifyId: this.$route.query.id,
      selectTableList: [],
      ids: [],
      gongzzList:[],//工作站
      gongxuList:[]//所有工序
    };
  },

  computed: { ...mapGetters(["isAdmin"]) },
  created() {
    this.getList();
    this.getGongzzList();
    this.getGongxuList();
  },
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁编辑器
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
      // console.log(this.editor.getAllMenuKeys())
      const toolbar = DomEditor.getToolbar(this.editor);
      // console.log(DomEditor, this)
    },
    /** 查询角色列表 */
    getList() {
      this.loading = true;
      // getQyxxList({
      //   classifyId: this.classifyId,
      //   deleteData: 0,
      //   ...this.queryParams,
      //   publishStartTime: this.dateRange && this.dateRange[0],
      //   publishEndTime: this.dateRange && this.dateRange[1]
      // }).then(res => {
      //   this.tableList = res.data.records
      //   this.total = res.data.total
      // }).finally(() => {
      //   this.loading = false
      // })
      pageInspectRecord({
        curPage: this.queryParams.curPage,
        size: this.queryParams.pageSize,
      })
        .then((res) => {
          console.log(res);
          this.tableList = res.data.records;
          this.total = res.data.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    //新增检测记录
    addInspect(){
      addInspect(this.form).then(res=>{
        console.log(res)
        //1、前到工序未通过，不能进入下道工序
        //2、前到工序未检测，不能进入下到工序
        //3、通过
        if(res.code===200){
           this.getList()
        }else {
          this.$modal.msgError(res.msg)
        }
      }).catch(err=>{
        this.$message('网络调用错误,请检查网络');
      })
    },
    //查询出所有工作站
    getGongzzList(){
      listGongzz().then(res=>{
        this.gongzzList=res.data
      })
    },

     //查询出所有工序
     getGongxuList(){
      GongxuList().then(res=>{
        this.gongxuList=res.data
      })
    },
    // getChanpkh(row){
    //    let productid=row.inspectRecord.pid;
    //    let 
    // },


    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 取消按钮（数据权限）
    cancelDataScope() {
      this.openDataScope = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        title: undefined,
        scrapeDate: undefined,
        publishDate: undefined,
        transTitle: undefined,
        keyword: undefined,
        author: undefined,
        language: undefined,
        typeTag: undefined,
        url: undefined,
        abstractStr: undefined,
        transAbstract: undefined,
        fwb: undefined,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.curPage = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.selectTableList = selection;
      this.ids = selection.map((item) => item.id);
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      this.title = "修改";
      this.open = true;
      this.form = { ...row };
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          let params = {
            ...this.form,
            classifyId: this.classifyId,
            listenFileTypeCode: 1,
          };
          let formData = new FormData();
          for (let key in params) {
            if (params[key] !== void 0) {
              formData.append(key, params[key]);
            }
          }
          if (this.form.id) {
            editQyxx(formData).then((res) => {
              this.open = false;
              this.getList();
            });
          } else {
            createQyxx(formData).then((res) => {
              this.open = false;
              this.getList();
            });
          }
          this.open = false;
        }
      });
    },
    /** 获取附件链接 */
    getEnclosureUrl(row) {
      getSourcePath({ id: row.id })
        .then((response) => {
          this.previewUrl = response.data[0];
        })
        .catch((error) => {
          console.log(error);
        });
    },
    /** 预览按钮操作 */
    handlePreview(row) {
      this.previewVisible = true;
      this.previewUrl = "";
      this.getEnclosureUrl(row);
    },
    rendered() {
      console.log("渲染完成");
      console.log(this.previewUrl);
    },
    /** 下载文件 */
    downloadFile() {
      const aLink = document.createElement("a");
      aLink.href = this.previewUrl;
      aLink.click();
    },
    handleDownload(row) {
      this.getEnclosureUrl(row);
      setTimeout(() => {
        this.downloadFile();
      }, 1000);
    },
    handleDownload2(row) {
      // 2. 创建Blob对象，类型为纯文本
      const blob = new Blob([row.summary], {
        type: "application/msword;charset=utf-8",
      });

      // 3. 使用file-saver库的saveAs函数触发下载
      saveAs(blob, row.title + ".doc");
    },
    /** 收藏按钮操作 */
    handleCollection() {
      // TODO 收藏功能
    },

    /** 删除按钮操作 */
    handleDelete(id) {
      this.$modal
        .confirm("是否确认删除？")
        .then(() => {
          deletInspect(id).then((res) => {
            this.getList();
            this.$modal.msgSuccess("删除成功");
          });
        })
        .catch(() => {});
    },
    handleSavaJiance() {

    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "system/role/export",
        {
          ...this.queryParams,
        },
        `role_${new Date().getTime()}.xlsx`
      );
    },
  },
};
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
<style lang="scss">
.el-tooltip__popper {
  background-color: #fff !important;
  color: #606266 !important;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !important;
  max-width: 600px;
}
.red-text {
  color: red;
  font-weight: bold;
}
</style>
